<script setup>
import { inject } from 'vue';
import MeterUploadSection from './MeterUploadSection.vue';
import CompareUploadSection from './CompareUploadSection.vue';
import GeneralUpload from './GeneralUpload.vue';

const fileStore = inject('fileStore');
const emit = defineEmits(['clearFiles']);

const handleClearFiles = () => {
  fileStore.clearFiles();
  emit('clearFiles');
  ElMessage.info('已清空上传文件列表');
};
</script>

<template>
  <div class="card">
    <div class="selector-right">
      <el-button type="warning" @click="handleClearFiles" class="clear-btn">
        <i-ep-delete class="mr-2" />
        清空文件列表
      </el-button>
    </div>

    <MeterUploadSection v-if="fileStore.selectedFunction === 'upload_meter'" />

    <CompareUploadSection
      v-else-if="
        fileStore.selectedFunction === 'compare' ||
        fileStore.selectedFunction === 'sync_remarks' ||
        fileStore.selectedFunction === 'filter_common_values' ||
        fileStore.selectedFunction === 'compare_header_consistency'
      "
      :selectedFunction="fileStore.selectedFunction"
    />

    <GeneralUpload v-else />
  </div>
</template>

<style scoped>
.card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 24px;
  border: 1px solid #ebeef5;
  transition: all 0.3s ease;
}

.card:hover {
  box-shadow: 0 6px 24px 0 rgba(0, 0, 0, 0.12);
}

.selector-right {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.clear-btn {
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
</style>
